<template>
  <div>
    <div v-if="!isActive" class="placeholder" @click="activatePicker">
      {{ displayValue }}<span v-if="showUnit && value !== null && value !== ''">{{ showUnit }}</span>
    </div>
    <div v-else class="custom-number-picker">
      <div class="number-display">
<input v-model="displayNumber" class="number-input" type="text" @input="handleInput" @focus="selectInput" @blur="validateNumber"
  @change="handleChange" @keydown.up.prevent="incrementValue" @keydown.down.prevent="decrementValue" ref="numberInput">
<span v-if="showUnit" class="unit-text">{{ showUnit }}</span>
      </div>
      <div class="arrow-container">
        <span class="arrow-up" @click="incrementValue">△</span>
        <span class="arrow-down" @click="decrementValue">▽</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'NumberPicker',
  props: {
    placeholder: {
      type: String,
      default: '请选择数字'
    },
    value: {
      type: [Number, String],
      default: null
    },
    field: {
      type: String,
      default: ''
    },
    min: {
      type: Number,
      default: 0
    },
    max: {
      type: Number,
      default: 100
    },
    showUnit: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      isActive: false,
      displayNumber: '0',
      userModified: false
    }
  },
  computed: {
    displayValue() {
      if (this.value === null || this.value === '') {
        return this.placeholder;
      }
      return this.value.toString();
    },
    numericValue() {
      const num = parseInt(this.displayNumber, 10);
      return isNaN(num) ? this.min : num;
    }
  },
  watch: {
    value(newVal) {
      if (newVal !== null && newVal !== '') {
        this.displayNumber = newVal.toString();
      } else {
        this.displayNumber = this.min.toString();
      }
      this.userModified = false;
    },
    min(newVal) {
      if (this.numericValue < newVal) {
        this.displayNumber = newVal.toString();
        this.emitValue();
      }
    },
    max(newVal) {
      if (this.numericValue > newVal) {
        this.displayNumber = newVal.toString();
        this.emitValue();
      }
    }
  },
  mounted() {
    if (this.value !== null && this.value !== '') {
      this.displayNumber = this.value.toString();
    } else {
      this.displayNumber = this.min.toString();
    }
  },
  methods: {
    activatePicker() {
      this.isActive = true;
      this.displayNumber = this.value !== null && this.value !== '' ?
                          this.value.toString() : this.min.toString();
      this.userModified = false;
      this.$nextTick(() => {
        this.$refs.numberInput.focus();
        this.$refs.numberInput.select();
      });
    },
    selectInput() {
      // 选中文本以便用户直接输入
      this.$refs.numberInput.select();
    },
    handleInput() {
      this.userModified = true;
      // 只允许数字输入
      this.displayNumber = this.displayNumber.replace(/[^\d]/g, '');
    },
    handleChange() {
      // 处理change事件，确保数值有效
      this.validateNumber();
    },
    validateNumber() {
      if (this.displayNumber === '' || isNaN(this.numericValue)) {
        this.displayNumber = this.min.toString();
      } else {
        // 确保数值在min和max之间
        let num = this.numericValue;
        if (num < this.min) num = this.min;
        if (num > this.max) num = this.max;
        this.displayNumber = num.toString();
      }

      if (this.userModified) {
        this.emitValue();
      }
    },
    incrementValue() {
      this.userModified = true;
      let newValue = this.numericValue + 1;
      if (newValue > this.max) newValue = this.min; // 循环到最小值
      this.displayNumber = newValue.toString();
      this.emitValue();
    },
    decrementValue() {
      this.userModified = true;
      let newValue = this.numericValue - 1;
      if (newValue < this.min) newValue = this.max; // 循环到最大值
      this.displayNumber = newValue.toString();
      this.emitValue();
    },
    emitValue() {
      const numValue = this.numericValue;
      this.$emit('input', numValue);
      this.$emit('change', this.field, numValue);
    }
  }
}
</script>

<style scoped>
.custom-number-picker {
  display: flex;
  align-items: center;
  font-family: Arial, sans-serif;
}
.number-display {
  display: flex;
  align-items: center;
  margin-right: 5px;
  font-size: 16px;
}
.number-input {
  border: 1px solid #dcdfe6;
  background: white;
  width: 60px;
  text-align: center;
  font-size: inherit;
  font-family: inherit;
  color: inherit;
  padding: 5px;
  border-radius: 4px 0 0 4px;
  outline: none;
  border-right: none;
}
.unit-text {
  padding: 5px;
  border: 1px solid #dcdfe6;
  border-left: none;
  background: #f5f7fa;
  color: #909399;
  border-radius: 0 4px 4px 0;
  font-size: 12px;
  min-width: 30px;
  text-align: center;
}
.number-input:focus {
  border-color: #409EFF;
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
}
.number-input:focus + .unit-text {
  border-color: #409EFF;
}
.arrow-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.arrow-up, .arrow-down {
  cursor: pointer;
  font-size: 12px;
  color: #606266;
  user-select: none;
  padding: 2px 5px;
  line-height: 1;
}
.arrow-up:hover, .arrow-down:hover {
  color: #409EFF;
}
.placeholder {
  padding: 8px 15px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  cursor: pointer;
  color: #606266;
  min-width: 80px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
.placeholder:hover {
  border-color: #c0c4cc;
}
</style>
